import QtQuick 2.9
import QtQuick.Controls 2.0

ApplicationWindow {
    id:login
    visible: true
    width: 430
    height: 330
    flags: Qt.FramelessWindowHint|Qt.Window | Qt.WindowStaysOnTopHint // 无边框窗口


    // 添加 MouseArea 用于拖动
    MouseArea {
        id: dragArea
        anchors.fill: parent // 填满整个父矩形

        property int dragX: 0
        property int dragY: 0
        property bool dragging: false

        onPressed: {
            dragX = mouseX
            dragY = mouseY
            dragging = true
        }
        onPositionChanged: {
            if (dragging) {
                login.x += mouse.x - dragX // 更新父元素位置
                login.y += mouse.y - dragY
            }
        }
        onReleased: {
            dragging = false // 释放拖动
        }
    }


    Rectangle {
        id: mainRectangle
        width: parent.width
        height: parent.height
        anchors.fill: parent
        radius: 20

        //上方蓝色背景
        Rectangle{
            id: backgroundstyle
            width:parent.width
            height: 125
            Image {
                id: loginbackground
                source: "qrc:/images/loginBackground.png"
                fillMode: Image.PreserveAspectFit //保持宽高比
            }

            // 右上角关闭按钮
            Button{
                id:closeButton
                width: 20
                height: 20

                background: Rectangle{
                    color: "transparent"
                }

                anchors.top: parent.top
                anchors.right: parent.right

                Image {
                    width:  20
                    height: 20
                    id: closelogin
                    source: "qrc:/images/close.png"
                    fillMode: Image.PreserveAspectFit //保持宽高比
                }

                onClicked: {
                    Qt.quit()
                }
            }
        }
        //下方输入范围
        Rectangle{
            width:parent.width
            height: parent.height - 125
            color:  "#f0f0f0"
            //向下偏移125
            y:      125

            Column {
                spacing: 12
                anchors.centerIn: parent

                TextField {
                    id: usernameField
                    width: 235
                    height: 25
                    placeholderText: "用户名"
                    anchors.horizontalCenter: parent.horizontalCenter

                    background: Rectangle {
                        color: "transparent"
                        border.color: "transparent"
                        anchors.bottom: parent.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        height: 1  // Height of the underline
                        width: parent.width

                        // Draw the underline
                        Rectangle {
                            color: "gray"  // Color of the underline
                            height: 1
                            width: parent.width
                            anchors.bottom: parent.bottom
                        }
                    }
                }
                TextField {
                    id: passwordField
                    width: 235
                    height: 25
                    placeholderText: "密码"
                    echoMode: TextInput.Password
                    anchors.horizontalCenter: parent.horizontalCenter

                    background: Rectangle {
                        color: "transparent"
                        border.color: "transparent"
                        anchors.bottom: parent.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        height: 1  // Height of the underline
                        width: parent.width

                        // Draw the underline
                        Rectangle {
                            color: "gray"  // Color of the underline
                            height: 1
                            width: parent.width
                            anchors.bottom: parent.bottom
                        }
                    }
                }
                Row {
                    CheckBox{
                        text: "记住密码"
                        // 自定义勾选框的大小
                        indicator: Rectangle {
                            width: 20 // 设置勾选框宽度
                            height: 20 // 设置勾选框高度
                            border.color: "black"
                            //color: control.checked ? "lightblue" : "transparent"
                        }
                         onCheckedChanged: {
                            if(checked )
                            {
                                console.log("选择")
                            }
                            else
                            {
                                console.log("取消")
                            }
                        }
                    }
                    spacing: 25
                    CheckBox{
                        text: "自动登录"
                        // 自定义勾选框的大小
                        indicator: Rectangle {
                            width: 20 // 设置勾选框宽度
                            height: 20 // 设置勾选框高度
                            border.color: "black"
                            //color: control.checked ? "lightblue" : "transparent"
                        }
                        onCheckedChanged: {
                            if(checked )
                            {
                                console.log("选择")
                            }
                            else
                            {
                                console.log("取消")
                            }
                        }
                    }
                }

                Button {
                    text: "登录"
                    spacing: 12
                    width: 240
                    height: 35

                    // 设置背景颜色
                    background: Rectangle {
                        color: "lightblue"
                        radius: 5
                    }
                    // 设置字体颜色位置
                    contentItem: Text {
                        color: "white"
                        text: parent.text
                        anchors.fill: parent
                        anchors.centerIn: parent
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize: 15  // Adjust font size as needed
                    }

                    onClicked: {
                        console.log("登录按钮被点击")
                        change.login(usernameField.text , passwordField.text)
                    }
                }
            }
        }
    }
}
